<template>
  <div class="wrap">
    <el-page-header @back="onBack" style="margin-bottom: 20px">
      <template #content>
        <span class="title">{{ query.label }}</span>
      </template>
      <div class="descript">{{ query.descript }}</div>
    </el-page-header>

    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

type queryType = FeatureMenuType & { titleIcon: string };

const route = useRoute();
const query = route.query as queryType;
const router = useRouter();
const onBack = () => router.back();

if (import.meta.env.MODE === "development") {
  console.log("query: ", query);
}

onMounted(() => {
  // 跳转到指定组件的页面
  router.replace({ name: query.name });
});
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.wrap {
  padding: 10px;
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .descript {
    margin: 20px 0 0 20px;
    color: $gray;
    font-size: 12px;
  }
}
</style>
